<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>吃货清单</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
    <style>
      /* 简单的样式，您可以根据需要进行调整 */
      .checkbox {
        margin: 20px;
        h3 {
          color: pink;
        }
      }
      .checkbox label {
        margin-right: 10px;
      }
    </style>
  </head>
  <body>
    <div class="checkbox">
      <h3>吃货清单</h3>
      <label><input type="checkbox" class="selectAll" /> 全选</label>
      <div>
        <h4>水果</h4>
        <label><input type="checkbox" value="banana" /> banana</label>
        <label><input type="checkbox" value="apple" /> apple</label>
        <label><input type="checkbox" value="orange" /> orange</label>
      </div>
      <div>
        <h4>蔬菜</h4>
        <label><input type="checkbox" value="tomato" /> tomato</label>
        <label><input type="checkbox" value="egg" /> egg</label>
        <label><input type="checkbox" value="potato" /> potato</label>
      </div>
    </div>

    <div class="checkbox">
      <h3>明星清单</h3>
      <label><input type="checkbox" class="selectAll" /> 全选</label>
      <div>
        <label><input type="checkbox" value="Rose" /> Rose</label>
        <label><input type="checkbox" value="Curry" /> Curry</label>
        <label><input type="checkbox" value="James" /> James</label>
      </div>
    </div>

    <script>
      $(document).ready(function () {
        // 全选功能
        $(".selectAll").on("change", function () {
          var isChecked = $(this).is(":checked");
          $(this)
            .closest(".checkbox")
            .find('input[type="checkbox"]:not(.selectAll)')
            .each(function () {
              $(this).prop("checked", isChecked);
            });
        });

        // 单个选项的选中状态影响全选框的状态
        $(document).ready(function () {
          // 使用事件委托监听所有 checklist 中的复选框变化
          $(document).on(
            "change",
            '.checkbox input[type="checkbox"]',
            function () {
              // 获取当前 checklist 容器
              var $checklist = $(this).closest(".checkbox");
              // 获取当前 checklist 中的所有复选框
              var $checkboxes = $checklist.find('input[type="checkbox"]');
              // 获取当前 checklist 中的全选复选框
              var $selectAll = $checklist.find(".selectAll");
              // 检查是否所有复选框都被选中
              var allCheckboxesChecked =
                $checkboxes.length === $checkboxes.filter(":checked").length;

              // 如果所有复选框都被选中，则全选复选框也应该被选中，否则取消选中
              $selectAll.prop("checked", allCheckboxesChecked);
            }
          );
        });
      });
    </script>
  </body>
</html>
